<template>
  <div class="login">
    <div class="login-form f-c a-c j-c">
      <div class="login-title">招聘管理平台</div>
      <div class="login-form-box f-c a-c j-c">
        <div class="name">登录</div>
        <el-form ref="formRef" label-position="left" :model="form" :rules="rules">
          <el-form-item label="用户名" prop="username" >
            <el-input clearable v-model="form.username">
              <template #prefix>
                <i class="el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input clearable v-model="form.password" :type="isHide ? 'password' :'text'">
              <template #prefix>
                <i class="el-icon-lock"></i>
              </template>
              <template #suffix>
                <i :class="[isHide ? 'el-icon-view' : 'el-icon-eye']"></i>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button style="width: 100%" type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
import User from '@/lin/model/user'
import Utils from '@/lin/util/util'

export default {
  name: 'login',
  data() {
    return {
      loading: false, // 加载动画
      wait: 2000, // 2000ms之内不能重复发起请求
      throttleLogin: null, // 节流登录
      form: {
        username: '',
        password: '',
      },
      isHide: true,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    async login() {
      const { username, password } = this.form
      try {
        this.loading = true
        await User.getToken(username, password)
        await this.getInformation()
        this.loading = false
        this.$router.push('/about')
        this.$message.success('登录成功')
      } catch (e) {
        this.loading = false
        console.log(e)
      }
    },
    async getInformation() {
      try {
        // 尝试获取当前用户信息
        const user = await User.getPermissions()
        this.setUserAndState(user)
        this.setUserPermissions(user.permissions)
      } catch (e) {
        console.log(e)
      }
    },
    ...mapActions(['setUserAndState']),
    ...mapMutations({
      setUserPermissions: 'SET_USER_PERMISSIONS',
    }),
  },
  created() {
    // 节流登录
    this.throttleLogin = Utils.throttle(this.login, this.wait)
  },
  components: {},
}
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/image/login/login_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 148px;
}
.login-form {
  .login-title {
    height: 28px;
    margin-bottom: 62px;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
  }
  .login-form-box{
    width: 513px;
    /* 矩形 217 */
    border-radius: 8px;
    background: #FFFFFF;
    padding: 29px 38px;
    .name  {
      font-size: 24px;
      color: #333333;
      margin-bottom: 27px;
    }
    .el-form {
      width: 100%;
    }
  }
}

.f-r {
  display: flex;
  flex-direction: row;
}
.f-c {
  display: flex;
  flex-direction: column;
}
.f-s {
  flex-shrink: 0;
}
.f-g {
  flex-grow: 1;
}
.a-c {
  align-items: center;
}
.j-c {
  justify-content: center;
}
.j-e {
  justify-content: flex-end;
}
.j-b {
  justify-content: space-between;
}
.f-e {
  justify-content: flex-end;
}
.f-w {
  flex-wrap: wrap;
}
</style>
